{extend name="$base" /}
{block name="resources"}
<link rel="stylesheet" href="WAP_CSS/pay/get_pay_value.css"/>
{/block}
{block name="main"}
<div class="pay-password-bg" style="display: none" onclick="closePayPassword()"></div>

	<div class="pay-pass-bg-wrapper"  style="display: none" >
		<div class="password-div">
			<div class="pay-password-top">
				请输入支付密码
			</div>
			<div class="password-input-wrapper">
				<label for="password" class="password-lable">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<input id="password" type="password" name="password" maxlength="6">
				</label>
			</div>
		</div>
	</div>

<div class="head-info">
	<div class="head-pay">支付金额</div>
	<div class="head-pay-value">￥{$need_pay_money}</div>
</div>

<div class="available-balance">
	<span>可用余额：￥{$member_balance}元</span>
	<span class="balance_checkbox">
		<input type="checkbox" class="switch-checkbox" id="is_use_balance" checked>
		<label for="is_use_balance" class="switch-label ns-border-color-gray">
            <span class="switch-circle"></span>
        </label>
    </span>
</div>
{php}
	$pay_config = api("System.Pay.getPayConfig");// 支付方式配置
	$pay_config = $pay_config['data'];
{/php}

{assign name="un_num" value="0"}
{notempty name="$pay_config"}
<div class="pay-type-item">
	<div class="codes">
			{foreach name="$pay_config" item="pay_item"}
				{if $pay_item.is_use}
				<div class="pay-type" data-name="{:lang($pay_item.lang)}" data-url="{:__URL($pay_item['pay_url'], 'type='. $pay_item['addon_name'].'&no='.$pay_value['out_trade_no'])}">
					<img src="WAP_IMG/pay/{$pay_item.h5_icon}" class="wchat-photo">
					<span class="pay-title">{:lang($pay_item.lang)}</span>
					<span class="pay-check"><img src="WAP_IMG/pay/hgou.png"></span>
				</div>
				{else/}
					{php}$un_num += 1;{/php}
				{/if}
			{/foreach}
		{else/}
		<div class="not-pay-type">商家未配置支付方式</div>
	</div>
</div>
{/notempty}

<input type="hidden" id="out_trade_no" value="{$pay_value.out_trade_no}">
<input type="hidden" name="" id="member_balance" value="{$member_balance}">
<input type="hidden" name="" id="need_pay_money" value="{$need_pay_money}">
<input type="hidden" name="" id="pay_money" value="{$pay_value.pay_money}">

{if $un_num eq count($pay_config)}
	<div class="not-pay-type">商家未配置支付方式</div>
{else/}
	<section class="s-btn">
		<a class="alipay btn primary" onclick="showPayPassword()">{:lang('confirm_payment')}</a>
	</section>
{/if}

<script>
function showPayPassword(){
	var pay_name = $('.pay-type.active').attr('data-name');
	if (pay_name == '微信支付') {
		subOrder();
	}else{
		$(".pay-password-bg").show()
		$(".pay-pass-bg-wrapper").show()
	}
}
function closePayPassword(){

	$(".pay-password-bg").hide()
	$(".pay-pass-bg-wrapper").hide()

}
	$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
		var number = 6;   //定义输入最大值
		var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
		var list = $(".password-div ul li");  //定义list是li
		for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
			if(pw[i]){
				$(list[i]).text("·");
			}else{
				$(list[i]).text("");
			};
		};
		if(pw.length == 6){
			console.log('完成支付！')
			subOrder();
		}
	});
	$(".password-div ul").click(function(){
		$("input[name = 'password']").val("");
		$("#password").focus();
		$(".password-div ul li").text("");
	});

$("#is_use_balance").change(function(){
	var member_balance = $("#member_balance").val(),
		need_pay_money = $("#need_pay_money").val(),
		pay_money = $("#pay_money").val(),
		pay_type = $("#pay_type").val();
	if($(this).is(":checked")){
		$(".head-pay-value").text("￥"+need_pay_money);
		if(need_pay_money == 0 && pay_type == -1){
			$(".alipay").show();
		}
	}else{
		$(".head-pay-value").text("￥"+pay_money);
		if(need_pay_money == 0 && pay_type == -1){
			$(".alipay").hide();
		}
	}
});
var __IMG__ = 'WAP_IMG';

$(function(){
	$('.pay-type:eq(0)').addClass('active');
	$('.pay-type:eq(0) .pay-check').html("<img src='" + __IMG__ + "/pay/segou.png'>");
});

var is_sub = false;
function subOrder(){

	if(is_sub) return;
	is_sub = true;
	var is_use_balance = $("#is_use_balance").is(":checked") ? 1 : 0;
	var out_trade_no = $("#out_trade_no").val();
	var pay_password = $("input[name = 'password']").val();
	$.ajax({
		url : __URL(APPMAIN+'/pay/pay'),
		type : "post",
		data : {
			"out_trade_no" : out_trade_no,
			"is_use_balance" : is_use_balance,
			"pay_password" :pay_password
		},
		success : function(data){
			console.log(data)
			if(data['code'] == 0){
				calculate();
			}else if(data['code'] == 1){
				location.href = __URL(APPMAIN + '/pay/payReturn?msg=1&out_trade_no=' + out_trade_no);
			}else if(data['code'] < 0){
				toast(data['message']);
				is_sub = false;
			}
		}
	})
}

function calculate() {
	var pay_url = $('.pay-type.active').attr('data-url');
	if (pay_url != undefined) {
		window.location.href = pay_url;
	}else{
		toast("{:lang('choose_payment_method')}");
	}
}

$(".alipay").click(function(){
	window.webkit.messageHandlers.calculate.postMessage(null);
})

$('.pay-type').click(function(){
	$(this).addClass('active').siblings('.pay-type').removeClass('active');
	$(this).find('.pay-check').html("<img src='" + __IMG__ + "/pay/segou.png'>");
	$(this).siblings('.pay-type').find('.pay-check').html("<img src='" + __IMG__ + "/pay/hgou.png'>");
})

window.setInterval("payStatus()", 2000);
function payStatus(){
	$.ajax({
		type : "post",
		url : __URL(APPMAIN+'/pay/payStatus'),
		data : {
			out_trade_no : "{$pay_value.out_trade_no}"
		},
		success : function(data){
			if(data['code'] > 0){
				location.href=__URL(APPMAIN+'/pay/payReturn?out_trade_no={$pay_value["out_trade_no"]}&msg=1');
				clearInterval(payStatus);
			}
		}
	})
}
</script>
{/block}
{block name="footer"}{/block}
